﻿<html>
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="css/share.css">
<script src="js/share.js"></script>
<script src="js/maskpopup.js"></script>
<style>
body{font-family:"Helvetica,Arial,FreeSans";font-size:18px;}
#chat{width:800px;height:500px;position:absolute;left:400px;border:1px solid black;}

.chatwrap{overflow:auto;}
.chatwrap pre{margin:0;}
.left{width:80%;height:100%;float:left;}
.right{width:20%;height:100%;float:left;}
.log{width:100%;height:85%;background:black;}
.input{width:100%;height:15%;}
.info{width:100%;height:30%;}
.users{width:100%;height:70%;}

.inputwrap{overflow:auto;}
.inputarea{width:85%;height:100%;float:left;}
.inputbtn{width:15%;height:100%;float:left;}
.usercountwrap{width:100%;text-align:center;color:green;}
.disconnectbtn{width:100%;height:30px;display:none;}

.console{width:100%;height:100%;overflow:auto;color:white}

</style>
</head>
<body>
<p><strong>ftdgoo.eicp.net</strong></P>

<div id="chat"></div>
</body>
</html>
<script>

function WSChatClient(srvUrl){
	this.appName = "chat";
	this.srvUrl = srvUrl;
}

WSChatClient.prototype={
	init:function(){
		var self = this;
		var WS=("MozWebSocket" in window) ? window.MozWebSocket : window.WebSocket;
		if(!WS){
			this.onError && this.onError("Your browser do not support WebSocket, please update your browser!");
			return false;
		}
		
		this.ws = new WS(this.srvUrl);
		if(!this.ws){
			this.onError && this.onError("Create WebSocket failed!");
			return false;
		}
		
		this.ws.onerror = function(){
			self.onError && self.onError();
		},
		
		this.ws.onopen = function(){
			self.onOpen && self.onOpen();
		};
	 
		this.ws.onmessage = function(e){
			var jsonData = JSON.parse(e.data);
			if(jsonData.app != self.appName){
				return;
			}
			
			switch(jsonData.type){
				case "join":self.onJoin && self.onJoin(jsonData.data.userName, jsonData.data.userCount);break;
				case "rename":self.onRename && self.onRename(jsonData.data.oldName, jsonData.data.newName);break;
				case "message":self.onMessage && self.onMessage(jsonData.data.userName, jsonData.data.msg);break;
				case "leave":self.onLeave && self.onLeave(jsonData.data.userName, jsonData.data.userCount);break;
				default:break;
			}
		};
	 
		this.ws.onclose = function(){
			self.onClose && self.onClose();
		};
		
		return true;
	},
	
	_send:function(type, data){
		if(type == null || data == null)return false;
		
		if(this.ws.readyState == this.ws.CONNECTING)return false;//send when readyState==CONNECTING will rise a exception.
		return this.ws.send(JSON.stringify({app:this.appName, type:type, data:data}));
	},
	
	sendMessage:function(msg){
		return this._send("message", msg);
	},

	userJoin:function(name){
		return this._send("join", name);
	},
	
	userRename:function(newName){		
		return this._send("rename", newName);
	},

	disconnect:function(){
		this.ws.close();
	}
}



function WebConsole(dContainer){
	this.dCtn = dContainer;
	this.html = '<div class="console"></div>';
	this.init();
}

WebConsole.prototype = {
	init:function(){
		this.dCtn.innerHTML = this.html;
		this.dConsole = this.dCtn.getElementsByClassName("console")[0];
	},
	
	log:function(text){
		var wrap=document.createElement("div");
		wrap.innerHTML = '<span><pre wrap="auto">' + text + '</pre></span>';
		this.dConsole.appendChild(wrap);
		this.dConsole.scrollTop = this.dConsole.scrollHeight;
	}
}

function ChatRoom(dContainer,srvUrl){
this.dCtn = dContainer;
this.html =
	'<div class="chatwrap">'+
		'<div class="left">'+
			'<div class="log"></div>'+
			'<div class="input"></div>'+
		'</div>'+
		'<div class="right">'+
			'<div class="info"></div>'+
			'<div class="users"></div>'+
		'</div>'+
	'</div>';
this.inputHTML =
	'<div class="inputwrap">'+
			'<textarea class="inputarea"></textarea>'+
			'<button class="inputbtn">send</button>'+			
	'</div>';
this.infoHTML =
	'<div class="infowrap">'+
			'<div class="usercountwrap">'+
				'<span>Online user count: </span>'+
				'<span class="usercount">-</span>'+
			'</div>'+
			'<div>'+
				'<input class="renameval" type="text" value=""/>'+
				'<button class="renamebtn">Rename</button>'+
			'</div>'+
			'<button class="disconnectbtn">disconnect</button>'+			
	'</div>';

this.defaultName = "kyo";
this.initDOM();
this.initConnect(srvUrl);
}

ChatRoom.prototype = {
	initDOM:function(){
		var self = this;
		this.dCtn.innerHTML = this.html;
		this.wConsole = new WebConsole(this.dCtn.getElementsByClassName("log")[0]);
		
		var dInput = this.dCtn.getElementsByClassName("input")[0];
		dInput.innerHTML = this.inputHTML;
		
		//<textarea> input area
		this.dInputArea = dInput.getElementsByClassName("inputarea")[0];
		this.dInputArea.onkeydown=function(e){self._onkeydownEvent(e);};
		
		//<button> input button
		var dInputBtn = dInput.getElementsByClassName("inputbtn")[0];
		dInputBtn.onclick = function(){self.chatSend();};
		
		var dInfo = this.dCtn.getElementsByClassName("info")[0];
		dInfo.innerHTML = this.infoHTML;
		
		//<span> user count
		this.dUserCount = dInfo.getElementsByClassName("usercount")[0];
		
		//<input> <button> user rename
		this.dRenameVal = dInfo.getElementsByClassName("renameval")[0];
		var dRenameBtn = dInfo.getElementsByClassName("renamebtn")[0];
		dRenameBtn.onclick = function(){self.rename();};
		
		//<button> disconnect
		var dDisconnectBtn = dInfo.getElementsByClassName("disconnectbtn")[0];
		dDisconnectBtn.onclick = function(){self.disconnect();};
	},
	
	initConnect:function(srvUrl){
		var self = this;
		this.chatClient = new WSChatClient(srvUrl);
		
		this.chatClient.onError = function(text){
			self.say(text);
		};
		
		this.chatClient.onOpen = function(){
			self.showLogin();
		};
 
 		this.chatClient.onClose = function(){
			self.say('connection closed');
			self.dUserCount.innerHTML = "-";
		};
		
		this.chatClient.onJoin = function(userName, userCount){
			self.say(userName + " joined.");
			self.dUserCount.innerHTML = userCount;
		};
		
		this.chatClient.onRename = function(oldName, newName){
			self.say(oldName + " is renamed as " + newName);
		};
		
		this.chatClient.onMessage = function(userName, msg){
			self.say(userName + ": " + msg);
		};
		
		this.chatClient.onLeave = function(userName, userCount){
			self.say(userName + " leaved.");
			self.dUserCount.innerHTML = userCount;
		};
		
		this.chatClient.init();
	},
	
	say:function(text){
		if(!text)return;
		this.wConsole.log(text);
	},

	_onkeydownEvent:function(e){
		if(event.keyCode == 13){
			this.chatSend();
			e.preventDefault();
		}
	},
	
	chatSend:function(){
		if(Trim(this.dInputArea.value).length == 0)return;
		
		if(this.chatClient.sendMessage(this.dInputArea.value)){
			this.dInputArea.value = '';
		}else{
			this.say("send failed!");
		}

		this.dInputArea.focus();
	},
	
	userJoin:function(name){
		this.say("Welcome     you!");
		
		var trimedName = Trim(name);
		if(trimedName.length == 0)return;
		this.chatClient.userJoin(trimedName);
		this.dRenameVal.value = trimedName;
	},
	
	rename:function(){
		var trimedName = Trim(this.dRenameVal.value);
		if(trimedName.length == 0)return;
		this.chatClient && this.chatClient.userRename(trimedName);
	},
	
	disconnect:function(){
		this.chatClient && this.chatClient.disconnect();
	},
	
	showLogin:function(){
		var self = this;
/*		var pos=this.getDOM().getBoundingClientRect();
		var rect=new Rect(new Point(pos.left,pos.top),new Size(pos.right-pos.left,pos.bottom-pos.top));
*/
		var popupHTML=
				'<div style="text-align:center;color:white">'+
					'<h1>XCHAT</h1>'+
					'<span>Input your nikename: </span><input type="text" value="' + this.defaultName + '"/><button>确定</button>'+
				'</div>';
		var dPopupDOM = createDOMByString(popupHTML);
		dPopupDOM.style.width = 450;
		dPopupDOM.style.height = 150;
		dPopupDOM.style.background = "black";		
		dPopupDOM.getElementsByTagName("button")[0].onclick=function(){
			self.userJoin(dPopupDOM.getElementsByTagName("input")[0].value);
			mask.close();
		}
		
		var mask = new MaskPopup(document.body, dPopupDOM, 0.8, {lPer:0.5, tPer:0.3});
		mask.show();
	}
	
}

var chatroom = new ChatRoom(document.getElementById("chat"), 'ws://ftdgoo.eicp.net:443');

</script>